<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>评价</title>
    <link rel="stylesheet" href="../src/css/weui.css">
    <link rel="stylesheet" href="../src/css/star-rating-svg.css">
    <script src="../src/js/libs/jquery-3.0.0.min.js"></script>
    <script src="../src/js/libs/jquery.star-rating-svg.js"></script>
    <script src="../src/js/main.js"></script>
    <style>

         /* 顶部样式 */
         .weui_cells.top{
             background-color: #000000;
             font-size: 0;
         }
         .weui_cells.top:after{
             border-bottom: 0;
         }
         /* 顶部五角星大小 */
         .weui_cells.top .my-rating .jq-star-svg{
             /*width: 200%;*/
         }
         .weui_cells.top .weui_cell_ft{
             color: #FFFFff;
             font-size: 2rem;
         }
         /* 好评-差评样式 */
         .weui_panel_bd.state{
             background-color: #000000;
             font-size: 0;
         }
        .state .weui_media_bd{
            text-align: center;
        }
         .weui_panel_bd.state .weui_media_title{
             color: #bebebe;
         }
        .state .weui_media_bd p.weui_media_desc{
            font-size: 1.5rem;
            color: #ffffff;

        }

        /* 评价样式 */

        .weui_media_box .weui_media_title{
            position: relative;
        }
        .weui_media_box .weui_media_title .my-rating {
            position: absolute;
            right: 0;
            top: 0;
        }
        /* 五角星大小 */
        .weui_media_box .weui_media_title .my-rating .jq-star-svg{
            height: 70%;
        }
    </style>
</head>
<body>

<div class="weui_cells top">
    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <div class="my-rating"></div>
        </div>
        <div class="weui_cell_ft">75%</div>
    </div>
</div>

<div class="weui_panel_bd state">
    <div class="weui_media_box weui_media_appmsg">
        <div class="weui_media_bd">
            <h4 class="weui_media_title">好评</h4>
            <p class="weui_media_desc">677</p>
        </div>
        <div class="weui_media_bd">
            <h4 class="weui_media_title">差评</h4>
            <p class="weui_media_desc">153</p>
        </div>
    </div>
</div>

<div class="weui_panel weui_panel_access">
<div class="weui_panel_bd">
    <a href="evaluate-detail.html" class="weui_media_box weui_media_appmsg">
        <div class="weui_media_hd">
            <img class="weui_media_appmsg_thumb" src="" alt="">
        </div>
        <div class="weui_media_bd">
            <p class="weui_media_title">张先生<span class="my-rating"></span></p>
            <p class="weui_media_desc">客服十分耐心的为我解答问题，十分用心……</p>
        </div>
    </a>
    <a href="evaluate-detail.html" class="weui_media_box weui_media_appmsg">
        <div class="weui_media_hd">
            <img class="weui_media_appmsg_thumb" src="" alt="">
        </div>
        <div class="weui_media_bd">
            <h4 class="weui_media_title">程先生<span class="my-rating"></span></h4>
            <p class="weui_media_desc">客服十分耐心的为我解答问题，十分用心……</p>
        </div>
    </a>
</div>
<a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>
</div>
</body>
</html>